Skip to main content

Docusaurus + Cloudflare Pages 網頁字體使用與優化策略（繁體中文網站適用）

目標​

  • 合理管理網頁字體資源，提升網站載入速度與使用體驗。
  • 針對繁體中文大字體（如 Noto Sans TC）提出實際可行的最佳化方案。
  • 協助網站建置者避免因字體處理錯誤導致的 PageSpeed 分數降低與流量浪費。

字體相關背景知識​

  • 繁體中文字體特性：

    • 繁體中文完整字集（如 Noto Sans TC）包含數萬個字符，原始 .ttf 檔案體積通常超過 15～25MB。

  • Google Fonts 提供方式：

    • 為避免過大字體影響效能，Google Fonts 採用動態子集化（Subsetting）技術。
    • 根據瀏覽器實際需要的字符，自動只傳送部分字體，減少下載量。

  • 字體格式說明：

    • .woff2：現代瀏覽器推薦的字體格式，壓縮率高，載入速度快。
    • .ttf：原始字型格式，體積大，不建議直接用於網頁。

正確字體使用建議​

1. 高頻英文字體（如 Anton）​

  • 若字體本身輕量（數百KB以內），建議下載至本地端，隨網站一起部署。
  • 使用 <style> 中 @font-face 定義，確保無外部依賴。

範例：

@font-face {
  font-family: 'Anton';
  src: url('/fonts/Anton-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

2. 繁體中文字體（如 Noto Sans TC）​

  • 建議外聯 Google Fonts 使用，讓子集化機制自動生效。
  • 透過以下方式引入：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">
  • display=swap 參數可讓字體載入前先用系統字體顯示，避免白屏延遲（FOIT）。

網頁字體對效能的真實影響​

項目說明
初次畫面渲染速度（FCP）字體未優化時，首屏白屏時間會明顯變長
最大內容渲染速度（LCP）超大字體會拖慢最大元素渲染完成的時間
流量消耗完整載入繁體中文字庫將佔用大量流量，不利行動裝置
使用體驗無適當字體策略會造成跳字、白屏、延遲現象

總結建議​

使用場景推薦策略
小型英文字體本地部署
繁體中文大字體Google Fonts 外聯，啟用子集化
減少白屏等待使用 display=swap
加速字體載入加上 <preconnect> 到 Google Fonts 相關域名

📋 補充注意事項

  • 若有特定安全政策（CSP）設定，需要明確允許 fonts.gstatic.com 作為字體來源。
  • 外聯字體需確保 HTTPS 安全連線，避免被中間人攻擊。
  • 若後期網站搬離 Cloudflare Pages等平台，應再次確認字體載入策略是否適配新的主機環境。

✅ 合理管理字體資源，是打造高效能、高品質網頁的基礎工程。